<template>
  <div>
    签约状态：<el-select v-model="PendingSigningDto.status" placeholder="请选择" clearable>
    <el-option label="生效中" value="3"></el-option>
    <el-option label="已过期" value="4"></el-option>
  </el-select>
    签约机构：
    <el-select v-model="PendingSigningDto.institutionId" placeholder="请选择" clearable>
      <el-option
          v-for="item in InstitutionList"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>
    医生团队：
    <el-select v-model="PendingSigningDto.teamId" placeholder="请选择" clearable>
      <el-option
          v-for="item in TeamList"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>
    服务包：
    <el-select v-model="PendingSigningDto.serviceId" placeholder="请选择" clearable>
      <el-option
          v-for="item in ServiceList"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>
    <br>
    选择日期：
    <el-date-picker
        v-model="PendingSigningDto.dateOfBirth"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd">
    </el-date-picker>
    <el-button icon="el-icon-search" circle @click="findAllPendingSigning(1)"></el-button>
    <el-button type="primary" @click="exportExcel()">导出</el-button>
    <el-table
        ref="multipleTable"
        :data="PendingTableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="number"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="name"
          label="签约人姓名">
      </el-table-column>
      <el-table-column
          prop="idName"
          label="身份证号">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号码">
      </el-table-column>
      <el-table-column
          prop="doctorName"
          label="签约医生">
      </el-table-column>
      <el-table-column
          prop="teamName"
          label="签约医生团队">
      </el-table-column>
      <el-table-column
          prop="serviceName"
          label="签约服务包">
      </el-table-column>
      <el-table-column
          prop="status"
          label="签约状态">
        <template slot-scope="scope">
          <!-- 假设状态为数字，可以添加状态的文字描述 -->
          {{ scope.row.status === 3 ? '生效中' :'已过期'}}
        </template>
      </el-table-column>
      <el-table-column
          prop="expirationDate"
          label="到期时间">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-link type="primary" @click="findByOendingId(scope.row.id)">查看详细</el-link>
          {{    }}
          <el-link type="primary" @click="jumpEdit(scope.row.id)">续约</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="pageInfo.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageInfo.paegSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="findAllPendingSigning"
    />
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "qjiluVue",
  data() {
    return {
      PendingTableData: [],
      pageInfo: {},
      PendingSigningDto: {},
      InstitutionList: [],
      TeamList: [],
      ServiceList: [],
      multipleSelection: []
    }
  },
  created() {
    this.findAllPendingSigning(1)
    this.findAllInstitution()
    this.findAllZlTeam()
    this.findAllZlService()
  },
  methods: {
    jumpEdit(id){
      this.$router.push({path: '/qianyue/daichuli/editContractInformation', query: {pendingSigningId: id}})
    },
    findByOendingId(id){
      this.$router.push({path: '/qianyue/daichuli/detailedSigning', query: {id: id}})
    },
    exportExcel(){
      if (this.multipleSelection.length==0){
        this.$message.error("请选择要导出的数据")
      }
      axios.get(`http://localhost:8201/pendingSigning/exportExcel?arr=${this.multipleSelection}`).then(res=>{
        this.findAllPendingSigning(1)
      })
    },
    findAllZlService(){
      axios.get("http://localhost:8300/phl/service/findAllServiceList").then(res=>{
        this.ServiceList=res.data.data
      })
    },
    findAllZlTeam(){
      axios.get("http://localhost:8300/phl/team/findTeam").then(res=>{
        this.TeamList=res.data.data
      })
    },
    findAllInstitution(){
      axios.get("http://localhost:8300/phl/institution/findName").then(res=>{
        this.InstitutionList=res.data.data
      })
    },
    findAllPendingSigning(pageNum){
      this.PendingSigningDto.pageNum=pageNum
      if (this.PendingSigningDto.dateOfBirth!=null && this.PendingSigningDto.dateOfBirth.length>0){
        this.PendingSigningDto.startDate=this.PendingSigningDto.dateOfBirth[0]
        this.PendingSigningDto.endDate=this.PendingSigningDto.dateOfBirth[1]
      }
      axios.post("http://localhost:8201/pendingSigning/findAllPendingSigning/2",this.PendingSigningDto).then(res=>{
        this.PendingTableData = res.data.data.list;
        this.pageInfo = res.data.data;
        this.PendingSigningDto.startDate=null
        this.PendingSigningDto.endDate=null
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(row => row.id);
      console.log(this.multipleSelection)
    },
    handleSizeChange(pageSize){
      this.PendingSigningDto.pageSize=pageSize
      this.findAllPendingSigning(1)
    }
  }
}
</script>

<style scoped>

</style>